<template>
    <div class="decision-tree-container">
        <el-container>
            <el-header height="60px">
                <div class="header-content">
                    <h1 class="main-title">{{ $t("home.title") }}</h1>
                    <div class="header-controls">
                        <el-select
                            v-model="$i18n.locale"
                            size="small"
                            class="language-selector"
                        >
                            <el-option label="English" value="en" />
                            <el-option label="中文" value="zh" />
                        </el-select>
                    </div>
                </div>
            </el-header>

            <el-main>
                <el-row :gutter="20">
                    <!-- 左侧控制面板 -->
                    <el-col :span="8">
                        <el-card class="control-panel" shadow="hover">
                            <template #header>
                                <div class="card-header">
                                    <span class="card-title">{{
                                        $t("home.nodeManagement")
                                    }}</span>
                                    <el-button
                                        type="primary"
                                        size="small"
                                        @click="showCreateNodeDialog = true"
                                    >
                                        <el-icon>
                                            <Plus />
                                        </el-icon>
                                        {{ $t("home.createNode") }}
                                    </el-button>
                                </div>
                            </template>

                            <!-- 节点列表 -->
                            <div class="node-list">
                                <h3 class="section-title">
                                    {{ $t("home.createdNodes") }}
                                </h3>
                                <el-table
                                    :data="nodes"
                                    style="width: 100%"
                                    :header-cell-style="{
                                        background: '#f5f7fa',
                                        color: '#606266',
                                    }"
                                    stripe
                                    size="small"
                                >
                                    <el-table-column
                                        prop="name"
                                        :label="$t('home.nodeName')"
                                    />
                                    <el-table-column
                                        prop="type"
                                        :label="$t('home.type')"
                                        width="120"
                                    >
                                        <template #default="scope">
                                            <el-tag
                                                :type="
                                                    isDefaultEndNode(
                                                        scope.row.name,
                                                    )
                                                        ? 'info'
                                                        : getNodeTypeColor(
                                                              scope.row.type,
                                                          )
                                                "
                                                size="small"
                                            >
                                                {{
                                                    isDefaultEndNode(
                                                        scope.row.name,
                                                    )
                                                        ? $t(
                                                              "home.defaultEndNode",
                                                          )
                                                        : getNodeTypeName(
                                                              scope.row.type,
                                                          )
                                                }}
                                            </el-tag>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                        :label="$t('home.actions')"
                                        width="150"
                                    >
                                        <template #default="scope">
                                            <el-button
                                                size="small"
                                                @click="editNode(scope.row)"
                                            >
                                                <el-icon>
                                                    <Edit />
                                                </el-icon>
                                                {{ $t("home.edit") }}
                                            </el-button>
                                            <el-button
                                                size="small"
                                                type="danger"
                                                @click="deleteNode(scope.row)"
                                            >
                                                <el-icon>
                                                    <Delete />
                                                </el-icon>
                                                {{ $t("home.delete") }}
                                            </el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>

                            <!-- 可视化控制 -->
                            <div
                                class="visualization-controls"
                                style="margin-top: 20px"
                            >
                                <div class="control-section">
                                    <h5 class="section-title">
                                        {{ $t("home.visualization") }}
                                    </h5>
                                    <div class="button-group">
                                        <el-button
                                            type="success"
                                            size="small"
                                            @click="visualizeTree"
                                            :disabled="nodes.length === 0"
                                        >
                                            <el-icon>
                                                <View />
                                            </el-icon>
                                            {{
                                                $t("home.generateVisualization")
                                            }}
                                        </el-button>
                                        <el-button
                                            size="small"
                                            @click="clearVisualization"
                                        >
                                            <el-icon>
                                                <Delete />
                                            </el-icon>
                                            {{ $t("home.clearVisualization") }}
                                        </el-button>
                                    </div>
                                </div>

                                <div class="control-section">
                                    <h5 class="section-title">
                                        {{ $t("home.dataManagement") }}
                                    </h5>
                                    <div class="button-group">
                                        <el-button
                                            type="info"
                                            size="small"
                                            @click="loadExample"
                                        >
                                            <el-icon>
                                                <Document />
                                            </el-icon>
                                            {{ $t("home.loadExample") }}
                                        </el-button>
                                        <el-button
                                            type="warning"
                                            size="small"
                                            @click="exportData"
                                            :disabled="nodes.length === 0"
                                        >
                                            <el-icon>
                                                <Download />
                                            </el-icon>
                                            {{ $t("home.exportData") }}
                                        </el-button>
                                        <el-button
                                            type="primary"
                                            size="small"
                                            @click="importData"
                                        >
                                            <el-icon>
                                                <Upload />
                                            </el-icon>
                                            {{ $t("home.importData") }}
                                        </el-button>
                                    </div>
                                </div>

                                <div class="control-section">
                                    <h5 class="section-title">
                                        {{ $t("home.analysis") }}
                                    </h5>
                                    <div class="button-group">
                                        <el-button
                                            type="danger"
                                            size="small"
                                            @click="generateTree"
                                            :disabled="nodes.length === 0"
                                        >
                                            <el-icon>
                                                <Share />
                                            </el-icon>
                                            {{
                                                $t("home.generateDecisionTree")
                                            }}
                                        </el-button>
                                        <el-button
                                            type="success"
                                            size="small"
                                            @click="
                                                showSensitivityAnalysisDialog = true
                                            "
                                            :disabled="nodes.length === 0"
                                        >
                                            <el-icon>
                                                <TrendCharts />
                                            </el-icon>
                                            {{
                                                $t(
                                                    "home.probabilisticSensitivityAnalysis",
                                                )
                                            }}
                                        </el-button>
                                        <el-button
                                            type="info"
                                            size="small"
                                            @click="
                                                showRiskProfileDialog = true
                                            "
                                            :disabled="nodes.length === 0"
                                        >
                                            <el-icon>
                                                <DataAnalysis />
                                            </el-icon>
                                            {{ $t("home.riskProfile") }}
                                        </el-button>
                                    </div>
                                </div>
                            </div>

                            <!-- Payoff函数配置 -->
                            <div class="payoff-config" style="margin-top: 20px">
                                <h4 class="section-title">
                                    {{ $t("home.payoffFunctionConfig") }}
                                </h4>

                                <!-- 收益函数类型选择 -->
                                <div
                                    class="function-type-selector"
                                    style="margin-bottom: 15px"
                                >
                                    <el-select
                                        v-model="selectedPayoffFunctionType"
                                        :placeholder="
                                            $t('home.selectPayoffFunctionType')
                                        "
                                        @change="onPayoffFunctionTypeChange"
                                        style="width: 100%"
                                    >
                                        <el-option
                                            :label="$t('home.expectedValue')"
                                            value="ev"
                                        />
                                        <el-option
                                            :label="$t('home.utility')"
                                            value="utility"
                                        />
                                        <el-option
                                            :label="
                                                $t('home.certaintyEquivalent')
                                            "
                                            value="certainty"
                                        />
                                        <el-option
                                            :label="$t('home.custom')"
                                            value="custom"
                                        />
                                    </el-select>
                                </div>

                                <div class="code-editor-container">
                                    <el-input
                                        v-model="payoffFunction"
                                        type="textarea"
                                        :rows="12"
                                        class="code-editor"
                                        :placeholder="
                                            $t('home.enterPayoffFunction')
                                        "
                                    />
                                </div>

                                <div class="function-actions">
                                    <el-button
                                        type="success"
                                        size="small"
                                        @click="savePayoffFunction"
                                    >
                                        <el-icon>
                                            <Check />
                                        </el-icon>
                                        {{ $t("home.saveFunction") }}
                                    </el-button>
                                    <el-button
                                        size="small"
                                        @click="resetPayoffFunction"
                                    >
                                        <el-icon>
                                            <Refresh />
                                        </el-icon>
                                        {{ $t("home.resetToDefault") }}
                                    </el-button>
                                </div>
                            </div>
                        </el-card>
                    </el-col>

                    <!-- 右侧可视化区域 -->
                    <el-col :span="16">
                        <el-card class="visualization-area" shadow="hover">
                            <template #header>
                                <div class="card-header">
                                    <span class="card-title">{{
                                        $t("home.decisionTreeVisualization")
                                    }}</span>
                                    <div class="interaction-controls">
                                        <el-button
                                            size="small"
                                            @click="resetZoom"
                                            :disabled="!hasGraphviz"
                                        >
                                            <el-icon>
                                                <Refresh />
                                            </el-icon>
                                            {{ $t("home.resetZoom") }}
                                        </el-button>
                                        <el-button
                                            size="small"
                                            @click="fitGraph"
                                            :disabled="!hasGraphviz"
                                        >
                                            <el-icon>
                                                <FullScreen />
                                            </el-icon>
                                            {{ $t("home.fitWindow") }}
                                        </el-button>
                                        <el-button
                                            size="small"
                                            @click="toggleZoom"
                                            :disabled="!hasGraphviz"
                                        >
                                            <el-icon>
                                                <ZoomIn />
                                            </el-icon>
                                            {{
                                                zoomEnabled
                                                    ? $t("home.disableZoom")
                                                    : $t("home.enableZoom")
                                            }}
                                        </el-button>
                                    </div>
                                </div>
                            </template>

                            <!-- 决策树可视化区域 -->
                            <div
                                id="tree-container"
                                class="tree-container"
                            ></div>

                            <!-- 敏感性分析结果区域 -->
                            <div
                                v-if="sensitivityAnalysisResult"
                                class="sensitivity-analysis-section"
                            >
                                <el-divider content-position="left">
                                    <h4>
                                        {{
                                            $t(
                                                "home.sensitivityAnalysisResults",
                                            )
                                        }}
                                    </h4>
                                </el-divider>
                                <div class="sensitivity-results">
                                    <div class="result-content">
                                        <div class="result-info">
                                            <el-tag
                                                :type="
                                                    getNodeTypeColor(
                                                        sensitivityAnalysisResult.node_type,
                                                    )
                                                "
                                            >
                                                {{
                                                    getNodeTypeName(
                                                        sensitivityAnalysisResult.node_type,
                                                    )
                                                }}
                                            </el-tag>
                                            <span class="variable-name">{{
                                                sensitivityAnalysisResult.varname
                                            }}</span>
                                        </div>
                                        <div class="result-image">
                                            <img
                                                :src="
                                                    sensitivityAnalysisResult.file_url
                                                "
                                                :alt="
                                                    $t(
                                                        'home.sensitivityAnalysisChart',
                                                    )
                                                "
                                                @error="handleImageError"
                                                class="sensitivity-chart"
                                            />
                                        </div>
                                        <div class="result-actions">
                                            <el-button
                                                type="primary"
                                                size="small"
                                                @click="
                                                    downloadSensitivityImage
                                                "
                                                :disabled="
                                                    !sensitivityAnalysisResult.file_url
                                                "
                                            >
                                                {{ $t("home.downloadChart") }}
                                            </el-button>
                                            <el-button
                                                size="small"
                                                @click="clearSensitivityResults"
                                            >
                                                {{ $t("home.clearResults") }}
                                            </el-button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>

        <!-- 创建节点对话框 -->
        <el-dialog
            v-model="showCreateNodeDialog"
            :title="$t('home.createNodeTitle')"
            width="600px"
        >
            <el-form :model="newNode" label-width="120px">
                <el-form-item :label="$t('home.nodeNameLabel')">
                    <el-input
                        v-model="newNode.name"
                        :placeholder="$t('home.nodeNamePlaceholder')"
                    />
                </el-form-item>

                <el-form-item :label="$t('home.nodeTypeLabel')">
                    <el-select
                        v-model="newNode.type"
                        :placeholder="$t('home.nodeTypePlaceholder')"
                    >
                        <el-option
                            :label="$t('home.decisionNode')"
                            value="decision"
                        />
                        <el-option
                            :label="$t('home.chanceNode')"
                            value="chance"
                        />
                        <el-option
                            :label="$t('home.terminalNode')"
                            value="terminal"
                        />
                    </el-select>
                </el-form-item>

                <!-- 决策节点配置 -->
                <template v-if="newNode.type === 'decision'">
                    <el-form-item :label="$t('home.maximize')">
                        <el-switch v-model="newNode.maximize" />
                    </el-form-item>

                    <el-form-item :label="$t('home.branchConfig')">
                        <div
                            v-for="(branch, index) in newNode.branches"
                            :key="index"
                            class="branch-item"
                        >
                            <div class="branch-form">
                                <el-form-item
                                    :label="$t('home.branchName')"
                                    label-width="80px"
                                >
                                    <el-input
                                        v-model="branch.name"
                                        :placeholder="
                                            $t('home.branchNamePlaceholder')
                                        "
                                    />
                                </el-form-item>
                                <el-form-item
                                    :label="$t('home.value')"
                                    label-width="80px"
                                >
                                    <el-input
                                        v-model="branch.value"
                                        :placeholder="
                                            $t('home.valuePlaceholder')
                                        "
                                    />
                                </el-form-item>
                                <el-form-item
                                    :label="$t('home.targetNode')"
                                    label-width="80px"
                                >
                                    <el-input
                                        v-model="branch.target"
                                        :placeholder="
                                            $t('home.targetNodePlaceholder')
                                        "
                                    />
                                </el-form-item>
                                <el-form-item>
                                    <el-button
                                        type="danger"
                                        size="small"
                                        @click="removeBranch(index)"
                                        >{{
                                            $t("home.deleteBranch")
                                        }}</el-button
                                    >
                                </el-form-item>
                            </div>
                        </div>
                        <el-button
                            type="primary"
                            size="small"
                            @click="addBranch"
                            >{{ $t("home.addBranch") }}</el-button
                        >
                    </el-form-item>
                </template>

                <!-- 机会节点配置 -->
                <template v-if="newNode.type === 'chance'">
                    <el-form-item :label="$t('home.branchConfig')">
                        <div
                            v-for="(branch, index) in newNode.branches"
                            :key="index"
                            class="branch-item"
                        >
                            <div class="branch-form">
                                <el-form-item
                                    :label="$t('home.branchName')"
                                    label-width="80px"
                                >
                                    <el-input
                                        v-model="branch.name"
                                        :placeholder="
                                            $t('home.branchNamePlaceholder')
                                        "
                                    />
                                </el-form-item>
                                <el-form-item
                                    :label="$t('home.probability')"
                                    label-width="80px"
                                >
                                    <el-input
                                        v-model="branch.probability"
                                        :placeholder="
                                            $t('home.probabilityPlaceholder')
                                        "
                                    />
                                </el-form-item>
                                <el-form-item
                                    :label="$t('home.value')"
                                    label-width="80px"
                                >
                                    <el-input
                                        v-model="branch.value"
                                        :placeholder="
                                            $t('home.valuePlaceholder')
                                        "
                                    />
                                </el-form-item>
                                <el-form-item
                                    :label="$t('home.targetNode')"
                                    label-width="80px"
                                >
                                    <el-input
                                        v-model="branch.target"
                                        :placeholder="
                                            $t('home.targetNodePlaceholder')
                                        "
                                    />
                                </el-form-item>
                                <el-form-item>
                                    <el-button
                                        type="danger"
                                        size="small"
                                        @click="removeBranch(index)"
                                        >{{
                                            $t("home.deleteBranch")
                                        }}</el-button
                                    >
                                </el-form-item>
                            </div>
                        </div>
                        <el-button
                            type="primary"
                            size="small"
                            @click="addBranch"
                            >{{ $t("home.addBranch") }}</el-button
                        >
                    </el-form-item>
                </template>

                <!-- 结束节点配置 -->
                <template v-if="newNode.type === 'terminal'">
                    <el-form-item :label="$t('home.payoffFunction')">
                        <el-input
                            v-model="newNode.payoffFn"
                            :placeholder="$t('home.payoffFunctionName')"
                        />
                    </el-form-item>
                </template>
            </el-form>

            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="showCreateNodeDialog = false">{{
                        $t("home.cancel")
                    }}</el-button>
                    <el-button type="primary" @click="createNode">{{
                        $t("home.create")
                    }}</el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 编辑节点对话框 -->
        <el-dialog
            v-model="showEditNodeDialog"
            :title="$t('home.editNodeTitle')"
            width="600px"
        >
            <el-form :model="editingNode" label-width="120px">
                <el-form-item :label="$t('home.nodeNameLabel')">
                    <el-input
                        v-model="editingNode.name"
                        :placeholder="$t('home.nodeNamePlaceholder')"
                    />
                </el-form-item>

                <el-form-item :label="$t('home.nodeTypeLabel')">
                    <el-select
                        v-model="editingNode.type"
                        :placeholder="$t('home.nodeTypePlaceholder')"
                        disabled
                    >
                        <el-option
                            :label="$t('home.decisionNode')"
                            value="decision"
                        />
                        <el-option
                            :label="$t('home.chanceNode')"
                            value="chance"
                        />
                        <el-option
                            :label="$t('home.terminalNode')"
                            value="terminal"
                        />
                    </el-select>
                </el-form-item>

                <!-- 决策节点配置 -->
                <template v-if="editingNode.type === 'decision'">
                    <el-form-item :label="$t('home.maximize')">
                        <el-switch v-model="editingNode.maximize" />
                    </el-form-item>

                    <el-form-item :label="$t('home.branchConfig')">
                        <div
                            v-for="(branch, index) in editingNode.branches"
                            :key="index"
                            class="branch-item"
                        >
                            <div class="branch-form">
                                <el-form-item
                                    :label="$t('home.branchName')"
                                    label-width="80px"
                                >
                                    <el-input
                                        v-model="branch.name"
                                        :placeholder="
                                            $t('home.branchNamePlaceholder')
                                        "
                                    />
                                </el-form-item>
                                <el-form-item
                                    :label="$t('home.value')"
                                    label-width="80px"
                                >
                                    <el-input
                                        v-model="branch.value"
                                        :placeholder="
                                            $t('home.valuePlaceholder')
                                        "
                                    />
                                </el-form-item>
                                <el-form-item
                                    :label="$t('home.targetNode')"
                                    label-width="80px"
                                >
                                    <el-input
                                        v-model="branch.target"
                                        :placeholder="
                                            $t('home.targetNodePlaceholder')
                                        "
                                    />
                                </el-form-item>
                                <el-form-item>
                                    <el-button
                                        type="danger"
                                        size="small"
                                        @click="removeEditBranch(index)"
                                        >{{
                                            $t("home.deleteBranch")
                                        }}</el-button
                                    >
                                </el-form-item>
                            </div>
                        </div>
                        <el-button
                            type="primary"
                            size="small"
                            @click="addEditBranch"
                            >{{ $t("home.addBranch") }}</el-button
                        >
                    </el-form-item>
                </template>

                <!-- 机会节点配置 -->
                <template v-if="editingNode.type === 'chance'">
                    <el-form-item :label="$t('home.branchConfig')">
                        <div
                            v-for="(branch, index) in editingNode.branches"
                            :key="index"
                            class="branch-item"
                        >
                            <div class="branch-form">
                                <el-form-item
                                    :label="$t('home.branchName')"
                                    label-width="80px"
                                >
                                    <el-input
                                        v-model="branch.name"
                                        :placeholder="
                                            $t('home.branchNamePlaceholder')
                                        "
                                    />
                                </el-form-item>
                                <el-form-item
                                    :label="$t('home.probability')"
                                    label-width="80px"
                                >
                                    <el-input
                                        v-model="branch.probability"
                                        :placeholder="
                                            $t('home.probabilityPlaceholder')
                                        "
                                    />
                                </el-form-item>
                                <el-form-item
                                    :label="$t('home.value')"
                                    label-width="80px"
                                >
                                    <el-input
                                        v-model="branch.value"
                                        :placeholder="
                                            $t('home.valuePlaceholder')
                                        "
                                    />
                                </el-form-item>
                                <el-form-item
                                    :label="$t('home.targetNode')"
                                    label-width="80px"
                                >
                                    <el-input
                                        v-model="branch.target"
                                        :placeholder="
                                            $t('home.targetNodePlaceholder')
                                        "
                                    />
                                </el-form-item>
                                <el-form-item>
                                    <el-button
                                        type="danger"
                                        size="small"
                                        @click="removeEditBranch(index)"
                                        >{{
                                            $t("home.deleteBranch")
                                        }}</el-button
                                    >
                                </el-form-item>
                            </div>
                        </div>
                        <el-button
                            type="primary"
                            size="small"
                            @click="addEditBranch"
                            >{{ $t("home.addBranch") }}</el-button
                        >
                    </el-form-item>
                </template>

                <!-- 结束节点配置 -->
                <template v-if="editingNode.type === 'terminal'">
                    <el-form-item :label="$t('home.payoffFunction')">
                        <el-input
                            v-model="editingNode.payoffFn"
                            :placeholder="$t('home.payoffFunctionName')"
                        />
                    </el-form-item>
                </template>
            </el-form>

            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="showEditNodeDialog = false">{{
                        $t("home.cancel")
                    }}</el-button>
                    <el-button type="primary" @click="saveNodeEdit">{{
                        $t("home.save")
                    }}</el-button>
                </span>
            </template>
        </el-dialog>

        <!-- Probabilistic Sensitivity Analysis对话框 -->
        <el-dialog
            v-model="showSensitivityAnalysisDialog"
            :title="$t('home.sensitivityAnalysisTitle')"
            width="700px"
            @close="clearSensitivityResults"
        >
            <el-form :model="sensitivityAnalysisForm" label-width="120px">
                <el-form-item :label="$t('home.variableName')" required>
                    <el-input
                        v-model="sensitivityAnalysisForm.varname"
                        :placeholder="$t('home.variableNamePlaceholder')"
                    />
                </el-form-item>
            </el-form>

            <!-- 敏感性分析结果图片显示 -->
            <div v-if="sensitivityAnalysisResult" class="dialog-results">
                <el-divider content-position="left">
                    <h4>{{ $t("home.analysisResults") }}</h4>
                </el-divider>

                <div class="result-summary">
                    <div class="result-info">
                        <el-tag
                            :type="
                                getNodeTypeColor(
                                    sensitivityAnalysisResult.node_type,
                                )
                            "
                        >
                            {{
                                getNodeTypeName(
                                    sensitivityAnalysisResult.node_type,
                                )
                            }}
                        </el-tag>
                        <span class="variable-name">{{
                            sensitivityAnalysisResult.varname
                        }}</span>
                    </div>

                    <div class="result-image-container">
                        <img
                            :src="sensitivityAnalysisResult.file_url"
                            :alt="$t('home.sensitivityAnalysisChart')"
                            @error="handleImageError"
                            class="result-image"
                        />
                    </div>

                    <div class="result-actions">
                        <el-button
                            type="primary"
                            size="small"
                            @click="downloadSensitivityImage"
                            :disabled="!sensitivityAnalysisResult.file_url"
                        >
                            {{ $t("home.downloadChart") }}
                        </el-button>
                        <el-button
                            size="small"
                            @click="clearSensitivityResults"
                        >
                            {{ $t("home.clearResults") }}
                        </el-button>
                    </div>
                </div>
            </div>

            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="showSensitivityAnalysisDialog = false">{{
                        $t("home.cancel")
                    }}</el-button>
                    <el-button
                        type="primary"
                        @click="performSensitivityAnalysis"
                        :loading="sensitivityAnalysisLoading"
                    >
                        {{ $t("home.analyze") }}
                    </el-button>
                </span>
            </template>
        </el-dialog>

        <!-- Risk Profile对话框 -->
        <el-dialog
            v-model="showRiskProfileDialog"
            :title="$t('home.riskProfileTitle')"
            width="700px"
            @close="clearRiskProfileResults"
        >
            <el-form :model="riskProfileForm" label-width="120px">
                <el-form-item :label="$t('home.nodeIndex')" required>
                    <el-input-number
                        v-model="riskProfileForm.idx"
                        :min="0"
                        :max="nodes.length - 1"
                        :placeholder="$t('home.nodeIndexPlaceholder')"
                    />
                </el-form-item>

                <el-form-item :label="$t('home.cumulative')">
                    <el-switch v-model="riskProfileForm.cumulative" />
                </el-form-item>

                <el-form-item :label="$t('home.single')">
                    <el-switch v-model="riskProfileForm.single" />
                </el-form-item>
            </el-form>

            <!-- Risk Profile结果图片显示 -->
            <div v-if="riskProfileResult" class="dialog-results">
                <el-divider content-position="left">
                    <h4>{{ $t("home.riskProfileResults") }}</h4>
                </el-divider>

                <div class="result-summary">
                    <div class="result-info">
                        <span class="variable-name"
                            >{{ $t("home.nodeIndex") }}:
                            {{ riskProfileForm.idx }}</span
                        >
                        <el-tag
                            :type="
                                riskProfileForm.cumulative
                                    ? 'success'
                                    : 'primary'
                            "
                        >
                            {{
                                riskProfileForm.cumulative
                                    ? $t("home.cumulative")
                                    : $t("home.nonCumulative")
                            }}
                        </el-tag>
                        <el-tag
                            :type="riskProfileForm.single ? 'warning' : 'info'"
                        >
                            {{
                                riskProfileForm.single
                                    ? $t("home.single")
                                    : $t("home.multiple")
                            }}
                        </el-tag>
                    </div>

                    <div class="result-image-container">
                        <img
                            :src="riskProfileResult.file_url"
                            :alt="$t('home.riskProfileChart')"
                            @error="handleImageError"
                            class="result-image"
                        />
                    </div>

                    <div class="result-actions">
                        <el-button
                            type="primary"
                            size="small"
                            @click="downloadRiskProfileImage"
                            :disabled="!riskProfileResult.file_url"
                        >
                            {{ $t("home.downloadChart") }}
                        </el-button>
                        <el-button
                            size="small"
                            @click="clearRiskProfileResults"
                        >
                            {{ $t("home.clearResults") }}
                        </el-button>
                    </div>
                </div>
            </div>

            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="showRiskProfileDialog = false">{{
                        $t("home.cancel")
                    }}</el-button>
                    <el-button
                        type="primary"
                        @click="performRiskProfileAnalysis"
                        :loading="riskProfileLoading"
                    >
                        {{ $t("home.analyze") }}
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import * as echarts from "echarts";
import { ElMessage, ElMessageBox } from "element-plus";
import axios from "axios";
import { useI18n } from "vue-i18n";
import {
    Plus,
    Refresh,
    FullScreen,
    ZoomIn,
    View,
    Delete,
    Document,
    Upload,
    Download,
    Share,
    TrendCharts,
    DataAnalysis,
    Edit,
    Check,
} from "@element-plus/icons-vue";

const { t } = useI18n();

// 默认结束节点常量
const DEFAULT_END_NODE = "DEFAULT_END";

// 创建默认结束节点
const createDefaultEndNode = () => {
    const defaultNode = {
        name: DEFAULT_END_NODE,
        type: "terminal",
        maximize: true,
        branches: [],
        payoffFn: "default_payoff",
        isDefaultEndNode: true, // 标记为默认结束节点
    };
    return defaultNode;
};

// 检查是否需要默认结束节点
const needsDefaultEndNode = () => {
    return nodes.value.some(
        (node) =>
            node.branches &&
            node.branches.some(
                (branch) =>
                    branch.target === DEFAULT_END_NODE || !branch.target,
            ),
    );
};

// 确保默认结束节点存在（仅在需要时）
const ensureDefaultEndNode = () => {
    const hasDefaultNode = nodes.value.find((n) => n.name === DEFAULT_END_NODE);
    const needsDefault = needsDefaultEndNode();

    if (needsDefault && !hasDefaultNode) {
        nodes.value.unshift(createDefaultEndNode()); // 添加到列表开头
    }
};

// 检查是否为默认结束节点
const isDefaultEndNode = (nodeName) => {
    return nodeName === DEFAULT_END_NODE;
};

// 响应式数据
const nodes = ref([]);
const showCreateNodeDialog = ref(false);
const showEditNodeDialog = ref(false);
const editingNodeIndex = ref(-1);
const payoffFunction = ref("");
const hasGraphviz = ref(false);
const zoomEnabled = ref(true);
const currentGraphviz = ref(null);
const showSensitivityAnalysisDialog = ref(false);
const sensitivityAnalysisLoading = ref(false);

// 敏感性分析结果
const sensitivityAnalysisResult = ref(null);

// Risk Profile相关
const showRiskProfileDialog = ref(false);
const riskProfileLoading = ref(false);
const riskProfileResult = ref(null);

// 收益函数类型选择
const selectedPayoffFunctionType = ref("ev");

// 敏感性分析表单数据
const sensitivityAnalysisForm = reactive({
    varname: "",
});

// Risk Profile表单数据
const riskProfileForm = reactive({
    idx: 0,
    cumulative: false,
    single: true,
});

// 新节点数据
const newNode = reactive({
    name: "",
    type: "decision",
    maximize: true,
    branches: [],
    payoffFn: "",
});

// 编辑节点数据
const editingNode = reactive({
    name: "",
    type: "decision",
    maximize: true,
    branches: [],
    payoffFn: "",
});

// 初始化新节点
const initNewNode = () => {
    newNode.name = "";
    newNode.type = "decision";
    newNode.maximize = true;
    newNode.branches = [];
    newNode.payoffFn = "";
};

// 添加分支
const addBranch = () => {
    if (newNode.type === "decision") {
        newNode.branches.push({
            name: "",
            value: "",
            target: DEFAULT_END_NODE,
        });
    } else if (newNode.type === "chance") {
        newNode.branches.push({
            name: "",
            probability: "",
            value: "",
            target: DEFAULT_END_NODE,
        });
    }
};

// 移除分支
const removeBranch = (index) => {
    newNode.branches.splice(index, 1);
};

// 添加编辑分支
const addEditBranch = () => {
    if (editingNode.type === "decision") {
        editingNode.branches.push({
            name: "",
            value: "",
            target: DEFAULT_END_NODE,
        });
    } else if (editingNode.type === "chance") {
        editingNode.branches.push({
            name: "",
            probability: "",
            value: "",
            target: DEFAULT_END_NODE,
        });
    }
};

// 移除编辑分支
const removeEditBranch = (index) => {
    editingNode.branches.splice(index, 1);
};

// 创建节点
const createNode = () => {
    if (!newNode.name) {
        ElMessage.error(t("home.enterNodeName"));
        return;
    }

    if (nodes.value.find((n) => n.name === newNode.name)) {
        ElMessage.error(t("home.nodeNameExists"));
        return;
    }

    // 处理分支目标节点，如果为空则设置为默认结束节点
    const processedBranches = newNode.branches.map((branch) => ({
        ...branch,
        target: branch.target || DEFAULT_END_NODE,
    }));

    const node = {
        name: newNode.name,
        type: newNode.type,
        maximize: newNode.maximize,
        branches: processedBranches,
        payoffFn: newNode.payoffFn,
    };

    nodes.value.push(node);

    // 确保默认结束节点存在（在添加节点后检查）
    ensureDefaultEndNode();

    showCreateNodeDialog.value = false;
    initNewNode();
    ElMessage.success(t("home.nodeCreatedSuccessfully"));
};

// 编辑节点
const editNode = (node) => {
    const index = nodes.value.findIndex((n) => n.name === node.name);
    if (index !== -1) {
        editingNodeIndex.value = index;
        Object.assign(editingNode, JSON.parse(JSON.stringify(node)));
        showEditNodeDialog.value = true;
    }
};

// 保存节点编辑
const saveNodeEdit = () => {
    if (!editingNode.name) {
        ElMessage.error(t("home.enterNodeName"));
        return;
    }

    const existingNode = nodes.value.find(
        (n, i) => n.name === editingNode.name && i !== editingNodeIndex.value,
    );
    if (existingNode) {
        ElMessage.error(t("home.nodeNameExists"));
        return;
    }

    // 处理分支目标节点，如果为空则设置为默认结束节点
    const processedBranches = editingNode.branches.map((branch) => ({
        ...branch,
        target: branch.target || DEFAULT_END_NODE,
    }));

    nodes.value[editingNodeIndex.value] = {
        ...editingNode,
        branches: processedBranches,
    };

    // 确保默认结束节点存在（在更新节点后检查）
    ensureDefaultEndNode();
    showEditNodeDialog.value = false;
    ElMessage.success(t("home.nodeEditedSuccessfully"));
};

// 删除节点
const deleteNode = (node) => {
    ElMessageBox.confirm(t("home.confirmDeleteNode"), t("home.prompt"), {
        confirmButtonText: t("home.confirm"),
        cancelButtonText: t("home.cancel"),
        type: "warning",
    }).then(() => {
        const index = nodes.value.findIndex((n) => n.name === node.name);
        if (index !== -1) {
            nodes.value.splice(index, 1);
            ElMessage.success(t("home.nodeDeletedSuccessfully"));
        }
    });
};

// 获取节点类型颜色
const getNodeTypeColor = (type) => {
    const colors = {
        decision: "primary",
        chance: "success",
        terminal: "warning",
    };
    return colors[type] || "info";
};

// 获取节点类型名称
const getNodeTypeName = (type) => {
    const names = {
        decision: t("home.decisionNodeType"),
        chance: t("home.chanceNodeType"),
        terminal: t("home.terminalNodeType"),
    };
    return names[type] || type;
};

// 可视化决策树
const visualizeTree = () => {
    if (nodes.value.length === 0) {
        ElMessage.warning(t("home.pleaseCreateNodesFirst"));
        return;
    }

    // 清除现有可视化
    const container = document.getElementById("tree-container");
    container.innerHTML = "";

    // 构建ECharts树形数据
    const treeData = buildEChartsTreeData();

    // 创建ECharts实例
    const chart = echarts.init(container);

    // 配置选项
    const option = {
        tooltip: {
            trigger: "item",
            backgroundColor: "rgba(255, 255, 255, 0.9)",
            borderColor: "#ccc",
            borderWidth: 1,
            textStyle: {
                color: "#333",
            },
            formatter: function (params) {
                if (params.data.type === "node") {
                    let tooltip = `<div style="font-weight: bold; margin-bottom: 5px;">${params.data.name}</div>`;
                    tooltip += `<div style="color: #666;">${t("home.typeLabel")}${getNodeTypeName(params.data.nodeType)}</div>`;
                    if (params.data.branchInfo) {
                        tooltip += `<div style="color: #666; margin-top: 3px;">${t("home.attributesLabel")}${params.data.branchInfo}</div>`;
                    }
                    return tooltip;
                }
                return params.data.name;
            },
        },
        series: [
            {
                type: "tree",
                data: [treeData],
                top: "8%",
                left: "10%",
                bottom: "5%",
                right: "25%",
                symbolSize: function (value, params) {
                    // 根据节点类型设置不同大小
                    const nodeType = params.data.nodeType;
                    if (nodeType === "decision") return 20;
                    if (nodeType === "chance") return 18;
                    if (nodeType === "terminal") return 16;
                    return 16;
                },
                orient: "vertical",
                label: {
                    position: "left",
                    verticalAlign: "middle",
                    align: "right",
                    fontSize: 11,
                    lineHeight: 16,
                    padding: [4, 8],
                    backgroundColor: "rgba(255, 255, 255, 0.8)",
                    borderRadius: 4,
                    formatter: function (params) {
                        // 如果是分支节点，显示分支信息
                        if (params.data.branchInfo) {
                            return `${params.data.name}\n${params.data.branchInfo}`;
                        }
                        return params.data.name;
                    },
                },
                leaves: {
                    label: {
                        position: "right",
                        verticalAlign: "middle",
                        align: "left",
                        fontSize: 11,
                        lineHeight: 16,
                        padding: [4, 8],
                        backgroundColor: "rgba(255, 255, 255, 0.8)",
                        borderRadius: 4,
                    },
                },
                emphasis: {
                    focus: "descendant",
                    itemStyle: {
                        shadowBlur: 10,
                        shadowColor: "rgba(0, 0, 0, 0.3)",
                    },
                },
                expandAndCollapse: true,
                animationDuration: 550,
                animationDurationUpdate: 750,
                initialTreeDepth: -1,
                lineStyle: {
                    color: "#999",
                    width: 2,
                    curveness: 0.1,
                },
                itemStyle: {
                    color: function (params) {
                        return getNodeColor(params.data.nodeType);
                    },
                    borderColor: "#333",
                    borderWidth: 2,
                    borderRadius: function (params) {
                        // 根据节点类型设置不同圆角
                        const nodeType = params.data.nodeType;
                        if (nodeType === "decision") return 8;
                        if (nodeType === "chance") return 6;
                        if (nodeType === "terminal") return 4;
                        return 4;
                    },
                },
            },
        ],
    };

    // 设置配置并渲染
    chart.setOption(option);

    // 监听窗口大小变化
    window.addEventListener("resize", () => {
        chart.resize();
    });

    ElMessage.success(t("home.visualizationGeneratedSuccessfully"));
};

// 构建ECharts树形数据
const buildEChartsTreeData = () => {
    const nodeMap = new Map();
    const allNodes = new Set();

    // 收集所有节点名称（包括目标节点）
    nodes.value.forEach((node) => {
        allNodes.add(node.name);
        if (node.branches) {
            node.branches.forEach((branch) => {
                if (branch.target) {
                    allNodes.add(branch.target);
                }
            });
        }
    });

    // 创建所有节点的映射
    allNodes.forEach((nodeName) => {
        const existingNode = nodes.value.find((n) => n.name === nodeName);
        if (existingNode) {
            nodeMap.set(nodeName, {
                name: nodeName,
                type: "node",
                nodeType: existingNode.type,
                children: [],
                branches: existingNode.branches,
            });
        } else {
            // 自动创建缺失的目标节点
            nodeMap.set(nodeName, {
                name: nodeName,
                type: "node",
                nodeType: "terminal", // 默认为结束节点
                children: [],
                branches: [],
            });
        }
    });

    // 构建连接关系
    nodes.value.forEach((node) => {
        if (node.branches) {
            node.branches.forEach((branch) => {
                if (branch.target) {
                    const targetNode = nodeMap.get(branch.target);
                    const sourceNode = nodeMap.get(node.name);
                    if (targetNode && sourceNode) {
                        // 创建分支标签
                        let label = branch.name;
                        let attributes = [];

                        if (
                            branch.value !== undefined &&
                            branch.value !== null &&
                            branch.value !== ""
                        ) {
                            attributes.push(
                                `${t("home.valueLabel")}${branch.value}`,
                            );
                        }
                        if (
                            branch.probability !== undefined &&
                            branch.probability !== null &&
                            branch.probability !== ""
                        ) {
                            const prob = parseFloat(branch.probability);
                            if (!isNaN(prob)) {
                                attributes.push(
                                    `${t("home.probabilityLabel")}${(prob * 100).toFixed(1)}%`,
                                );
                            }
                        }

                        const childNode = {
                            ...targetNode,
                            name: `${label} → ${targetNode.name}`,
                            branchInfo: attributes.join(", "),
                        };

                        sourceNode.children.push(childNode);
                    }
                }
            });
        }
    });

    // 找到根节点（没有父节点的节点）
    const childNodes = new Set();
    nodes.value.forEach((node) => {
        if (node.branches) {
            node.branches.forEach((branch) => {
                if (branch.target) {
                    childNodes.add(branch.target);
                }
            });
        }
    });

    // 找到根节点
    const rootNodes = [];
    nodes.value.forEach((node) => {
        if (!childNodes.has(node.name)) {
            const rootNode = nodeMap.get(node.name);
            if (rootNode) {
                rootNodes.push(rootNode);
            }
        }
    });

    // 如果没有找到根节点，使用第一个节点作为根节点
    if (rootNodes.length === 0 && nodes.value.length > 0) {
        const firstNode = nodeMap.get(nodes.value[0].name);
        if (firstNode) {
            rootNodes.push(firstNode);
        }
    }

    return (
        rootNodes[0] || {
            name: "root",
            type: "node",
            nodeType: "terminal",
            children: [],
        }
    );
};

// 获取节点颜色
const getNodeColor = (type) => {
    const colors = {
        decision: "#1890FF", // 更深的蓝色
        chance: "#52C41A", // 更深的绿色
        terminal: "#FA8C16", // 更深的橙色
    };
    return colors[type] || "#8C8C8C";
};

// 清除可视化
const clearVisualization = () => {
    const container = document.getElementById("tree-container");
    container.innerHTML = "";
    ElMessage.success(t("home.visualizationCleared"));
};

// 加载示例
const loadExample = () => {
    nodes.value = [
        {
            name: "bid",
            type: "decision",
            maximize: true,
            branches: [
                { name: "low", value: "300", target: "competitor_bid" },
                { name: "medium", value: "500", target: "competitor_bid" },
                { name: "high", value: "700", target: "competitor_bid" },
                { name: "no-bid", value: "0", target: "profit" },
            ],
        },
        {
            name: "competitor_bid",
            type: "chance",
            branches: [
                {
                    name: "low",
                    probability: "0.35",
                    value: "400",
                    target: "cost",
                },
                {
                    name: "medium",
                    probability: "0.50",
                    value: "600",
                    target: "cost",
                },
                {
                    name: "high",
                    probability: "0.15",
                    value: "800",
                    target: "cost",
                },
            ],
        },
        {
            name: "cost",
            type: "chance",
            branches: [
                {
                    name: "low",
                    probability: "0.25",
                    value: "200",
                    target: "profit",
                },
                {
                    name: "medium",
                    probability: "0.50",
                    value: "400",
                    target: "profit",
                },
                {
                    name: "high",
                    probability: "0.25",
                    value: "600",
                    target: "profit",
                },
            ],
        },
        {
            name: "profit",
            type: "terminal",
            payoffFn: "payoff_fn",
        },
    ];

    // 确保默认结束节点存在
    ensureDefaultEndNode();

    ElMessage.success(t("home.exampleDataLoadedSuccessfully"));
};

// 导出数据
const exportData = () => {
    if (nodes.value.length === 0) {
        ElMessage.warning(t("home.noDataToExport"));
        return;
    }

    // 转换数据格式
    const exportNodes = nodes.value.map((node) => {
        // 确保branches存在且是数组
        const branches =
            node.branches && Array.isArray(node.branches)
                ? node.branches.map((branch) => {
                      const exportBranch = {
                          label: branch.name || "",
                          next: branch.target || "",
                      };

                      // 添加值（如果存在）
                      if (
                          branch.value !== undefined &&
                          branch.value !== null &&
                          branch.value !== ""
                      ) {
                          exportBranch.value =
                              parseFloat(branch.value) || branch.value;
                      }

                      // 添加概率（如果存在）
                      if (
                          branch.probability !== undefined &&
                          branch.probability !== null &&
                          branch.probability !== ""
                      ) {
                          exportBranch.probability =
                              parseFloat(branch.probability) ||
                              branch.probability;
                      }

                      return exportBranch;
                  })
                : [];

        return {
            name: node.name || "",
            type: node.type || "terminal",
            branches: branches,
        };
    });

    // 创建导出数据对象
    const exportDataObj = {
        nodes: exportNodes,
        payoff_function: payoffFunction.value,
    };

    // 转换为JSON字符串
    const jsonString = JSON.stringify(exportDataObj, null, 2);

    // 创建Blob对象
    const blob = new Blob([jsonString], { type: "application/json" });

    // 创建下载链接
    const url = URL.createObjectURL(blob);
    const link = document.createElement("a");
    link.href = url;
    link.download = "decision_tree_data.json";

    // 触发下载
    document.body.appendChild(link);
    link.click();

    // 清理
    document.body.removeChild(link);
    URL.revokeObjectURL(url);

    ElMessage.success(t("home.dataExportedSuccessfully"));
};

// 导入数据
const importData = () => {
    // 创建文件输入元素
    const input = document.createElement("input");
    input.type = "file";
    input.accept = ".json";

    input.onchange = (event) => {
        const file = event.target.files[0];
        if (!file) return;

        const reader = new FileReader();
        reader.onload = (e) => {
            try {
                const data = JSON.parse(e.target.result);

                if (!data.nodes || !Array.isArray(data.nodes)) {
                    ElMessage.error(t("home.incorrectFileFormat"));
                    return;
                }

                // 转换导入的数据格式
                const importedNodes = data.nodes.map((node) => {
                    // 确保branches存在且是数组
                    const branches =
                        node.branches && Array.isArray(node.branches)
                            ? node.branches.map((branch) => {
                                  const importBranch = {
                                      name: branch.label || "",
                                      target: branch.next || "",
                                  };

                                  // 添加值（如果存在）
                                  if (branch.value !== undefined) {
                                      importBranch.value =
                                          branch.value.toString();
                                  }

                                  // 添加概率（如果存在）
                                  if (branch.probability !== undefined) {
                                      importBranch.probability =
                                          branch.probability.toString();
                                  }

                                  return importBranch;
                              })
                            : [];

                    return {
                        name: node.name || "",
                        type: node.type || "terminal",
                        maximize: node.type === "decision" ? true : undefined,
                        branches: branches,
                        payoffFn: node.type === "terminal" ? "payoff_fn" : "",
                    };
                });

                // 更新节点数据
                nodes.value = importedNodes;

                // 确保默认结束节点存在
                ensureDefaultEndNode();

                // 导入payoff函数（如果存在）
                if (data.payoff_function) {
                    payoffFunction.value = data.payoff_function;
                }

                ElMessage.success(t("home.dataImportedSuccessfully"));
            } catch (error) {
                ElMessage.error(
                    `${t("home.fileParsingFailed")}${error.message}`,
                );
            }
        };

        reader.readAsText(file);
    };

    input.click();
};

// 生成决策树
const generateTree = async () => {
    if (nodes.value.length === 0) {
        ElMessage.warning(t("home.pleaseCreateNodesFirst"));
        return;
    }

    if (!payoffFunction.value.trim()) {
        ElMessage.warning(t("home.pleaseConfigurePayoffFunction"));
        return;
    }

    try {
        // 准备请求数据
        const sortedNodes = [...nodes.value].sort((a, b) => {
            // 将 DEFAULT_END 节点排在最后
            if (a.name === DEFAULT_END_NODE) return 1;
            if (b.name === DEFAULT_END_NODE) return -1;
            return 0;
        });

        const requestData = {
            json_data: {
                nodes: sortedNodes.map((node) => {
                    const branches =
                        node.branches && Array.isArray(node.branches)
                            ? node.branches.map((branch) => {
                                  const exportBranch = {
                                      label: branch.name || "",
                                      next: branch.target || "",
                                  };

                                  if (
                                      branch.value !== undefined &&
                                      branch.value !== null &&
                                      branch.value !== ""
                                  ) {
                                      exportBranch.value =
                                          parseFloat(branch.value) ||
                                          branch.value;
                                  }

                                  if (
                                      branch.probability !== undefined &&
                                      branch.probability !== null &&
                                      branch.probability !== ""
                                  ) {
                                      exportBranch.probability =
                                          parseFloat(branch.probability) ||
                                          branch.probability;
                                  }

                                  return exportBranch;
                              })
                            : [];

                    return {
                        name: node.name || "",
                        type: node.type || "terminal",
                        branches: branches,
                    };
                }),
            },
            payoff_fn_code: payoffFunction.value,
        };

        ElMessage.info(t("home.generatingDecisionTree"));

        // 调用API
        const response = await axios.post(
            "http://localhost:8000/api/generate-tree",
            requestData,
            {
                headers: {
                    "Content-Type": "application/json",
                },
            },
        );

        if (
            response.data &&
            response.data.success &&
            response.data.dot_content
        ) {
            // 渲染dot文件
            renderDotGraph(response.data.dot_content);
            ElMessage.success(t("home.decisionTreeGeneratedSuccessfully"));
        } else {
            const errorMessage =
                response.data?.message || t("home.apiErrorFormat");
            ElMessage.error(errorMessage);
        }
    } catch (error) {
        console.error(t("home.decisionTreeGenerationFailed"), error);
        ElMessage.error(
            `${t("home.decisionTreeGenerationFailed")} ${error.response?.data?.detail || error.message}`,
        );
    }
};

// 渲染dot图
const renderDotGraph = async (dotContent) => {
    try {
        // 动态加载d3和d3-graphviz
        const d3 = await import("d3");
        const d3Graphviz = await import("d3-graphviz");

        // 清除容器
        const container = document.getElementById("tree-container");
        container.innerHTML = "";

        // 创建graphviz渲染器
        const graphviz = d3Graphviz
            .graphviz(container)
            .width(container.clientWidth)
            .height(container.clientHeight)
            .fit(true)
            .zoom(zoomEnabled.value)
            .attributer(function (d) {
                // 为节点添加交互样式
                if (d.tag === "ellipse" || d.tag === "polygon") {
                    d3.select(this)
                        .style("cursor", "pointer")
                        .style("stroke-width", "2")
                        .on("mouseover", function () {
                            d3.select(this)
                                .style("stroke-width", "3")
                                .style("stroke", "#409eff")
                                .style("opacity", "0.8");
                        })
                        .on("mouseout", function () {
                            d3.select(this)
                                .style("stroke-width", "2")
                                .style("stroke", "#333")
                                .style("opacity", "1");
                        })
                        .on("click", function () {
                            // 点击节点时显示信息
                            const nodeName = d3
                                .select(this.parentNode)
                                .select("text")
                                .text();
                            if (nodeName) {
                                ElMessage.info(
                                    `${t("home.clickedNode")}${nodeName}`,
                                );
                            }
                        });
                }

                // 为边添加交互样式
                if (d.tag === "path" && d.class === "edge") {
                    d3.select(this)
                        .style("cursor", "pointer")
                        .style("stroke-width", "2")
                        .on("mouseover", function () {
                            d3.select(this)
                                .style("stroke-width", "3")
                                .style("stroke", "#409eff")
                                .style("opacity", "0.8");
                        })
                        .on("mouseout", function () {
                            d3.select(this)
                                .style("stroke-width", "2")
                                .style("stroke", "#333")
                                .style("opacity", "1");
                        })
                        .on("click", function () {
                            // 点击边时显示信息
                            const edgeLabel = d3
                                .select(this.parentNode)
                                .select("text")
                                .text();
                            if (edgeLabel) {
                                ElMessage.info(
                                    `${t("home.clickedEdge")}${edgeLabel}`,
                                );
                            }
                        });
                }

                // 为文本添加交互样式
                if (d.tag === "text") {
                    d3.select(this)
                        .style("cursor", "pointer")
                        .style("font-weight", "normal")
                        .on("mouseover", function () {
                            d3.select(this)
                                .style("font-weight", "bold")
                                .style("fill", "#409eff");
                        })
                        .on("mouseout", function () {
                            d3.select(this)
                                .style("font-weight", "normal")
                                .style("fill", "#333");
                        });
                }
            });

        // 渲染dot内容
        await graphviz.renderDot(dotContent);

        // 保存graphviz实例
        currentGraphviz.value = graphviz;
        hasGraphviz.value = true;

        ElMessage.success(t("home.decisionTreeRenderedSuccessfully"));
    } catch (error) {
        console.error(t("home.decisionTreeRenderingFailed"), error);
        ElMessage.error(
            `${t("home.decisionTreeRenderingFailed")} ${error.message}`,
        );
    }
};

// 默认payoff函数
const defaultPayoffFunction = `def payoff_fn(values, probabilities, branches):
    value_keys = values.keys()
    prob_keys = probabilities.keys()
    not_in_prob_keys = [key for key in value_keys if key not in prob_keys]
    outcome = 0 #sum([ values[key] for key in not_in_prob_keys ])
    for key in prob_keys:
        outcome += values[key] * probabilities[key]
    return outcome`;

// 不同的收益函数模板
const payoffFunctionTemplates = {
    ev: `def payoff_fn(values, probabilities, branches):
    value_keys = values.keys()
    prob_keys = probabilities.keys()
    not_in_prob_keys = [key for key in value_keys if key not in prob_keys]
    outcome = 0 #sum([ values[key] for key in not_in_prob_keys ])
    for key in prob_keys:
        outcome += values[key] * probabilities[key]
    return outcome`,

    utility: `def payoff_fn(values, probabilities, branches):
    import math
    R = 1000
    value_keys = values.keys()
    prob_keys = probabilities.keys()
    not_in_prob_keys = [key for key in value_keys if key not in prob_keys]
    outcome = 0#sum([ values[key] for key in not_in_prob_keys ])
    for key in prob_keys:
        outcome += 1 - math.exp( - values[key] * probabilities[key]  / R )
    return outcome`,

    certainty: `def payoff_fn(values, probabilities, branches):
    import math
    R = 1000
    value_keys = values.keys()
    prob_keys = probabilities.keys()
    not_in_prob_keys = [key for key in value_keys if key not in prob_keys]
    outcome =0 # sum([ values[key] for key in not_in_prob_keys ])
    for key in prob_keys:
        ux = 1 - math.exp( - values[key] * probabilities[key]  / R )
        ce = -1 * R * math.log(1-ux)
        outcome += ce * probabilities[key]
    return outcome`,

    custom: `# 在这里输入你的自定义收益函数
def payoff_fn(values, probabilities, branches):
    # 示例：简单的期望值计算
    value_keys = values.keys()
    prob_keys = probabilities.keys()
    not_in_prob_keys = [key for key in value_keys if key not in prob_keys]
    outcome =  0#sum([ values[key] for key in not_in_prob_keys ])
    for key in prob_keys:
        outcome += values[key] * probabilities[key]
    return outcome`,
};

// 收益函数类型改变处理
const onPayoffFunctionTypeChange = (type) => {
    if (type !== "custom") {
        payoffFunction.value = payoffFunctionTemplates[type];
    }
};

// 保存payoff函数
const savePayoffFunction = () => {
    if (!payoffFunction.value.trim()) {
        ElMessage.warning(t("home.pleaseEnterPayoffFunction"));
        return;
    }

    // 这里可以添加函数语法验证
    try {
        // 简单的语法检查：确保包含def关键字
        if (!payoffFunction.value.includes("def ")) {
            throw new Error(t("home.functionMustStartWithDef"));
        }

        ElMessage.success(t("home.payoffFunctionSavedSuccessfully"));
    } catch (error) {
        ElMessage.error(`${t("home.fileParsingFailed")}${error.message}`);
    }
};

// 重置为默认函数
const resetPayoffFunction = () => {
    payoffFunction.value =
        payoffFunctionTemplates[selectedPayoffFunctionType.value];
    ElMessage.success(t("home.resetToDefaultFunction"));
};

// 交互控制函数
const resetZoom = () => {
    if (currentGraphviz.value) {
        currentGraphviz.value.resetZoom();
        ElMessage.success(t("home.zoomReset"));
    }
};

const fitGraph = () => {
    if (currentGraphviz.value) {
        currentGraphviz.value.fit();
        ElMessage.success(t("home.graphFittedToWindow"));
    }
};

const toggleZoom = () => {
    if (currentGraphviz.value) {
        zoomEnabled.value = !zoomEnabled.value;
        if (zoomEnabled.value) {
            currentGraphviz.value.zoom(true);
        } else {
            currentGraphviz.value.zoom(false);
        }
        ElMessage.success(
            zoomEnabled.value ? t("home.zoomEnabled") : t("home.zoomDisabled"),
        );
    }
};

// 执行敏感性分析
const performSensitivityAnalysis = async () => {
    if (!sensitivityAnalysisForm.varname.trim()) {
        ElMessage.warning(t("home.pleaseEnterVariableName"));
        return;
    }

    if (nodes.value.length === 0) {
        ElMessage.warning(t("home.pleaseCreateNodesFirst"));
        return;
    }

    if (!payoffFunction.value.trim()) {
        ElMessage.warning(t("home.pleaseConfigurePayoffFunction"));
        return;
    }

    try {
        sensitivityAnalysisLoading.value = true;

        // 准备请求数据
        const sortedNodes = [...nodes.value].sort((a, b) => {
            // 将 DEFAULT_END 节点排在最后
            if (a.name === DEFAULT_END_NODE) return 1;
            if (b.name === DEFAULT_END_NODE) return -1;
            return 0;
        });

        const requestData = {
            json_data: {
                nodes: sortedNodes.map((node) => {
                    const branches =
                        node.branches && Array.isArray(node.branches)
                            ? node.branches.map((branch) => {
                                  const exportBranch = {
                                      label: branch.name || "",
                                      next: branch.target || "",
                                  };

                                  if (
                                      branch.value !== undefined &&
                                      branch.value !== null &&
                                      branch.value !== ""
                                  ) {
                                      exportBranch.value =
                                          parseFloat(branch.value) ||
                                          branch.value;
                                  }

                                  if (
                                      branch.probability !== undefined &&
                                      branch.probability !== null &&
                                      branch.probability !== ""
                                  ) {
                                      exportBranch.probability =
                                          parseFloat(branch.probability) ||
                                          branch.probability;
                                  }

                                  return exportBranch;
                              })
                            : [];

                    return {
                        name: node.name || "",
                        type: node.type || "terminal",
                        branches: branches,
                    };
                }),
            },
            payoff_fn_code: payoffFunction.value,
            varname: sensitivityAnalysisForm.varname.trim(),
        };

        ElMessage.info(t("home.performingSensitivityAnalysis"));

        // 调用后端API
        const response = await axios.post(
            "http://localhost:8000/api/sensitivity-analysis",
            requestData,
            {
                headers: {
                    "Content-Type": "application/json",
                },
            },
        );

        if (response.data && response.data.success) {
            // 处理返回的分析结果
            sensitivityAnalysisResult.value = {
                varname: sensitivityAnalysisForm.varname.trim(),
                node_type: response.data.node_type,
                file_url: response.data.file_url,
            };
            ElMessage.success(t("home.sensitivityAnalysisCompleted"));
            console.log("Sensitivity Analysis Result:", response.data);

            // 不关闭对话框，让用户查看结果
            // showSensitivityAnalysisDialog.value = false
            // 重置表单
            sensitivityAnalysisForm.varname = "";
        } else {
            const errorMessage =
                response.data?.message || t("home.apiErrorFormat");
            ElMessage.error(errorMessage);
        }
    } catch (error) {
        console.error(t("home.sensitivityAnalysisFailed"), error);
        ElMessage.error(
            `${t("home.sensitivityAnalysisFailed")} ${error.response?.data?.detail || error.message}`,
        );
    } finally {
        sensitivityAnalysisLoading.value = false;
    }
};

// 下载敏感性分析图
const downloadSensitivityImage = () => {
    if (
        sensitivityAnalysisResult.value &&
        sensitivityAnalysisResult.value.file_url
    ) {
        const link = document.createElement("a");
        link.href = sensitivityAnalysisResult.value.file_url;
        link.download = `${sensitivityAnalysisResult.value.varname}_sensitivity_analysis.png`;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        ElMessage.success(t("home.chartDownloadedSuccessfully"));
    } else {
        ElMessage.warning(t("home.noChartToDownload"));
    }
};

// 清除敏感性分析结果
const clearSensitivityResults = () => {
    sensitivityAnalysisResult.value = null;
    ElMessage.success(t("home.sensitivityResultsCleared"));
};

// 处理图片加载错误
const handleImageError = (event) => {
    event.target.src = "https://via.placeholder.com/150"; // 替换为默认图片
    event.target.alt = t("home.imageLoadError");
};

// 执行Risk Profile分析
const performRiskProfileAnalysis = async () => {
    if (nodes.value.length === 0) {
        ElMessage.warning(t("home.pleaseCreateNodesFirst"));
        return;
    }

    if (!payoffFunction.value.trim()) {
        ElMessage.warning(t("home.pleaseConfigurePayoffFunction"));
        return;
    }

    if (riskProfileForm.idx < 0 || riskProfileForm.idx >= nodes.value.length) {
        ElMessage.warning(t("home.invalidNodeIndex"));
        return;
    }

    try {
        riskProfileLoading.value = true;

        // 准备请求数据
        const sortedNodes = [...nodes.value].sort((a, b) => {
            // 将 DEFAULT_END 节点排在最后
            if (a.name === DEFAULT_END_NODE) return 1;
            if (b.name === DEFAULT_END_NODE) return -1;
            return 0;
        });

        const requestData = {
            json_data: {
                nodes: sortedNodes.map((node) => {
                    const branches =
                        node.branches && Array.isArray(node.branches)
                            ? node.branches.map((branch) => {
                                  const exportBranch = {
                                      label: branch.name || "",
                                      next: branch.target || "",
                                  };

                                  if (
                                      branch.value !== undefined &&
                                      branch.value !== null &&
                                      branch.value !== ""
                                  ) {
                                      exportBranch.value =
                                          parseFloat(branch.value) ||
                                          branch.value;
                                  }

                                  if (
                                      branch.probability !== undefined &&
                                      branch.probability !== null &&
                                      branch.probability !== ""
                                  ) {
                                      exportBranch.probability =
                                          parseFloat(branch.probability) ||
                                          branch.probability;
                                  }

                                  return exportBranch;
                              })
                            : [];

                    return {
                        name: node.name || "",
                        type: node.type || "terminal",
                        branches: branches,
                    };
                }),
            },
            payoff_fn_code: payoffFunction.value,
            idx: riskProfileForm.idx,
            cumulative: riskProfileForm.cumulative,
            single: riskProfileForm.single,
        };

        ElMessage.info(t("home.generatingRiskProfile"));

        // 调用后端API
        const response = await axios.post(
            "http://localhost:8000/api/risk-profile",
            requestData,
            {
                headers: {
                    "Content-Type": "application/json",
                },
            },
        );

        if (response.data && response.data.success) {
            // 处理返回的分析结果
            riskProfileResult.value = {
                file_url: response.data.file_url,
            };
            ElMessage.success(t("home.riskProfileGeneratedSuccessfully"));
            console.log("Risk Profile Result:", response.data);
        } else {
            const errorMessage =
                response.data?.message || t("home.apiErrorFormat");
            ElMessage.error(errorMessage);
        }
    } catch (error) {
        console.error(t("home.riskProfileGenerationFailed"), error);
        ElMessage.error(
            `${t("home.riskProfileGenerationFailed")} ${error.response?.data?.detail || error.message}`,
        );
    } finally {
        riskProfileLoading.value = false;
    }
};

// 下载Risk Profile图片
const downloadRiskProfileImage = () => {
    if (riskProfileResult.value && riskProfileResult.value.file_url) {
        const link = document.createElement("a");
        link.href = riskProfileResult.value.file_url;
        link.download = `risk_profile_node_${riskProfileForm.idx}.png`;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        ElMessage.success(t("home.chartDownloadedSuccessfully"));
    } else {
        ElMessage.warning(t("home.noChartToDownload"));
    }
};

// 清除Risk Profile结果
const clearRiskProfileResults = () => {
    riskProfileResult.value = null;
    ElMessage.success(t("home.riskProfileResultsCleared"));
};

// 组件挂载时初始化
onMounted(() => {
    initNewNode();
    // 设置默认的payoff函数
    payoffFunction.value =
        payoffFunctionTemplates[selectedPayoffFunctionType.value];
});
</script>

<style scoped>
.decision-tree-container {
    height: 100vh;
    background-color: #f5f5f5;
}

.el-header {
    background-color: #fff;
    border-bottom: 1px solid #e4e7ed;
    display: flex;
    align-items: center;
    justify-content: center;
}

.el-header h1 {
    margin: 0;
    color: #303133;
}

.control-panel {
    height: calc(100vh - 120px);
    overflow-y: auto;
}

.visualization-area {
    height: calc(100vh - 120px);
}

.tree-container {
    height: calc(100vh - 200px);
    overflow: hidden;
    border: 1px solid #e4e7ed;
    border-radius: 8px;
    background-color: #fafafa;
    padding: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-title {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
}

.interaction-controls {
    display: flex;
    gap: 8px;
}

.interaction-controls .el-button {
    margin: 0;
}

.node-list {
    margin-bottom: 20px;
}

.node-list h3 {
    margin-bottom: 10px;
    color: #303133;
}

.branch-item {
    margin-bottom: 10px;
    padding: 15px;
    border: 1px solid #e4e7ed;
    border-radius: 6px;
    background-color: #fafafa;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.branch-item .el-input-number {
    width: 100%;
}

.branch-item .el-input-number .el-input__inner {
    text-align: center;
}

.branch-form {
    padding: 10px;
}

.branch-form .el-form-item {
    margin-bottom: 15px;
}

.branch-form .el-form-item:last-child {
    margin-bottom: 0;
}

.visualization-controls {
    border-top: 1px solid #e4e7ed;
    padding-top: 20px;
}

.visualization-controls .el-button {
    margin-right: 10px;
}

.payoff-config h4 {
    margin-bottom: 10px;
    color: #303133;
    font-size: 14px;
    font-weight: 600;
}

.payoff-config .el-textarea__inner {
    font-family: "Courier New", "Monaco", "Menlo", monospace;
    font-size: 12px;
    line-height: 1.4;
    background-color: #fafafa;
    border: 1px solid #e4e7ed;
}

.payoff-config .el-textarea__inner:focus {
    background-color: #fff;
    border-color: #409eff;
}

/* 收益函数类型选择器样式 */
.function-type-selector {
    margin-bottom: 15px;
}

.function-type-selector .el-select {
    width: 100%;
}

.function-type-selector .el-select .el-input__inner {
    border-radius: 6px;
    border: 1px solid #e4e7ed;
}

.function-type-selector .el-select:hover .el-input__inner {
    border-color: #409eff;
}

/* 头部样式优化 */
.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 0 20px;
}

.main-title {
    margin: 0;
    color: #303133;
    font-size: 24px;
    font-weight: 600;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.header-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

.language-selector {
    width: 120px;
}

/* 卡片样式优化 */
.control-panel,
.visualization-area {
    border-radius: 12px;
    border: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.control-panel:hover,
.visualization-area:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px 15px 20px;
    border-bottom: 1px solid #f0f0f0;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px 12px 0 0;
}

.card-title {
    font-size: 18px;
    font-weight: 600;
    color: #303133;
    margin: 0;
}

/* 控制区域样式 */
.control-section {
    margin-bottom: 25px;
    padding: 20px;
    background: #fafbfc;
    border-radius: 8px;
    border: 1px solid #e4e7ed;
}

.control-section:last-child {
    margin-bottom: 0;
}

.section-title {
    margin: 0 0 15px 0;
    font-size: 16px;
    font-weight: 600;
    color: #303133;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-title::before {
    content: "";
    width: 4px;
    height: 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 2px;
}

.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.button-group .el-button {
    margin: 0;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.button-group .el-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 节点列表样式 */
.node-list {
    margin-bottom: 25px;
}

.node-list .el-table {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.node-list .el-table th {
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%);
    color: #606266;
    font-weight: 600;
}

/* 收益函数配置样式 */
.payoff-config {
    background: #fafbfc;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e4e7ed;
}

.code-editor-container {
    margin-bottom: 15px;
}

.code-editor {
    font-family: "JetBrains Mono", "Fira Code", "Courier New", monospace;
    font-size: 13px;
    line-height: 1.6;
}

.code-editor .el-textarea__inner {
    background: #1e1e1e;
    color: #d4d4d4;
    border: 1px solid #3c3c3c;
    border-radius: 6px;
    padding: 15px;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

.code-editor .el-textarea__inner:focus {
    background: #252526;
    border-color: #007acc;
    box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.2);
}

.function-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* 可视化控制样式 */
.interaction-controls {
    display: flex;
    gap: 8px;
}

.interaction-controls .el-button {
    margin: 0;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.interaction-controls .el-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 树容器样式优化 */
.tree-container {
    height: calc(100vh - 200px);
    overflow: hidden;
    border: 1px solid #e4e7ed;
    border-radius: 8px;
    background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
    padding: 0;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .el-col-8 {
        width: 100%;
        margin-bottom: 20px;
    }

    .el-col-16 {
        width: 100%;
    }

    .button-group {
        flex-direction: column;
    }

    .button-group .el-button {
        width: 100%;
    }
}

/* 动画效果 */
.el-card {
    animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 滚动条美化 */
.control-panel::-webkit-scrollbar {
    width: 6px;
}

.control-panel::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.control-panel::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.control-panel::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}
</style>
